import { useUnit } from "effector-react";

import { $socketId } from "store";

const SocketInfo = () => {
  const socketId = useUnit($socketId);

  return (
    <div className="flex flex-row gap-2 content-center ">
      <div className="flex-none">Socket ID:</div>
      <div className="shrink">
        {!socketId ? (
          <div className="flex flex-row gap-2 content-center ">
            <div className="flex-none badge badge-warning gap-2">недоступен</div>
            <div className="shrink">(Проверьте сервер)</div>
          </div>
        ) : (
          <div className="badge badge-success gap-2">{socketId}</div>
        )}
      </div>
    </div>
  );
};

export default SocketInfo;
